<template>
  <view>
    <swiper
      class="imageContainer"
      previous-margin="50rpx"
      next-margin="50rpx"
      autoplay
      circular
      snap-to-edge="true"
    >
      <block v-for="(item, index) in imgList" :key="index">
        <swiper-item class="swiperitem"
          ><image
            style="width: 95%; height: 300rpx"
            class="itemImg"
            :src="item"
            mode="scaleToFill"
          ></image
        ></swiper-item>
      </block>
    </swiper>
  </view>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    imgList: string[]
  }>(),
  {},
)
</script>
<style scoped lang="scss">
.imageContainer {
  width: 100%;
  // /* height: 500rpx; */
  background-color: #fff;
  height: 300rpx;
  margin-bottom: 20rpx;
}

.swiperitem {
  height: 300rpx;
  padding: 0upx 20upx;
  box-sizing: border-box;
  position: relative;
}

.itemImg {
  width: 95%;
  position: absolute;
  border-radius: 15rpx;
  z-index: 5;

  box-shadow: 0px 4upx 15upx 0px rgba(153, 153, 153, 0.24);
}
</style>
